<template>
<div class="house-item" @click="itemClick">
    <div class="item-inner">
        <div class="cover">
            <img :src="itemData.image.url"  alt="">
        </div>
        <div class="info">
            <div class="summary">{{ itemData.summaryText }}</div>
            <div class="name">{{ itemData.houseName }}</div>
            <div class="price">
                <van-rate :model-value="itemScore" color="#fff"  :size="15" readonly allow-half></van-rate>
                <div class="new"> ¥{{ itemData.finalPrice  }}</div>
            </div>
        </div>
    </div>
</div>
</template>
<script setup>
import { computed } from 'vue';


const props = defineProps({
        itemData:{
            type:Object,
            default:()=>({})
        }
    })
   const emit =  defineEmits(['item-click'])
    const itemScore = computed(()=>{
        return Number(props.itemData.commentScore)
    })
    const itemClick = ()=>{
        emit('item-click',props.itemData)
    }
</script>
<style lang="less" scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
    .house-item{
        width: 50%;
        .item-inner{

            position: relative;
            margin: 5px;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            .cover{
                img{
                    width: 100%;
                }
            }
            .info{
                position: absolute;
                bottom: 0;
                padding: 8px 10px;
                color: #fff;
                .summary{
                    font-size: 12px;
                }
                .name{
                    margin: 5px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .price{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                }
            }
        }
    }
</style>